﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>XTD待办事项</title>
    <link rel="stylesheet" href="css/xtd.css">
</head>

<body>
<div class="app-container" id="taskList">
    <h1 class="app-header">XTD待办事项</h1>
    <div class="add-task">
        <input type="text" autocomplete="off" placeholder="添加事项" v-model="tasks.name" @keyup.enter="newItem"
               class="task-input">
        <input type="submit" value="" class="submit-task" @click="newItem" title="添加事项">
    </div>
    <ul class="task-list">
        <li class="task-list-item" v-for="task in tasks">
            <label class="task-list-item-label">
                <input type="checkbox" v-model="task.status" @click="changeItem(task)">
                <span>{{task.name}}</span>
            </label>
            <span @click="delItem(task)" class="delete-btn" title="删除事项"></span>
        </li>
    </ul>
</div>

<script src='js/vue.min.js'></script>
<script src="js/xtd.js"></script>
<div style="text-align:center;">
</div>
</body>

</html>